import React, { useEffect, useState } from 'react'
import './topic.css'
import { TOPIC } from '../../axios'
import { Button } from 'react-vant'
import { useNavigate } from 'react-router-dom'
export default function Topic() {
  const navigate = useNavigate()
  let [pages,setPage] = useState(1)
  let [total,setTotal ] = useState(1)
  let [data,setData ] = useState([])
  useEffect(() => {
    GetTOPIC()
  },[])
  const GetTOPIC = (page=1) => {
    TOPIC(page).then(res => {
      setTotal(res.data.data.totalPages)
      setPage(res.data.data.currentPage)
      setData(res.data.data.data)
    })
  }
  const rem = () => {
    setPage(pages-1)
    GetTOPIC(pages-1)
  }
  const add = () => {
    setPage(pages+1)
    GetTOPIC(pages+1)
  }
  return (
    <div className='topic-box'>
      {data.length > 0 && <ul>
        {
          data.map(item => {
            return <li className='topic-li' key={item.id}>
              <img src={item.scene_pic_url} alt="" />
              <p className='topic-tit'>{item.title}</p>
              <p className='topic-sub'>{item.subtitle}</p>
              <p className='topic-price'>￥{item.price_info}.00元</p>
            </li>
          })
        }
      </ul>}

      <div className='btns'>
        <Button onClick={rem} disabled={pages == 1 ? 'disabled' : ''} size='large'>
          上一页
        </Button>
        <Button onClick={add} disabled={pages == total ? 'disabled' : ''} size='large'>
          下一页
        </Button>
      </div>
      

    </div>
  )
}
